<!DOCTYPE html>
<html lang="en">
<head>
	<script src="/autocomplete-amirharel/jquery-1.5.js" type="text/javascript"></script>
	<script type="text/javascript">
		
		$(window).load(function(){
			$("textarea").bind("keyup mouseup",function(e){
				var ta = e.target;
				
				
				var selectionEnd = ta.selectionEnd;
				var text = ta.value;
				var subText = text.substr(0,selectionEnd);
				var restText = text.substr(selectionEnd,text.length);
				//console.log("subText="+subText+" restText="+restText);
				//console.log("subText=",subText);
				var lines = subText.split("\n");
				
				var miror = $(".miror");
				miror.html("");
				for( var i=0; i< lines.length-1; i++){
					miror.append("<div style='height:16px;'>"+lines[i]+"</div>");
				}
				miror.append("<span style='border:1px solid white;display:inline-block;'>"+lines[lines.length-1]+"</span>");
				var restLines = restText.split("\n");
				for( var i=1; i<restLines.length; i++ ){
					miror.append("<div style='height:16px;'>"+restLines[i]+"</div>");
				}
				//console.log("ta.scrollTop=",ta.scrollTop);
				miror.get(0).scrollTop = ta.scrollTop;
				
				var span = miror.children("span");
				var offset = span.offset();
				//console.log("offset=",offset);
				var img = $("img");
				img.css( "left", 240 + span.width() );
				
				//console.log("ta.scrollHeight="+ta.scrollHeight+" ta.height"+ta.clientHeight+" ta.scrollTop="+ta.scrollTop);
				img.css("top", -24 + ((lines.length-1) * 16)-(ta.scrollTop));
			});
			
			
			
			
			$("textarea").scroll(function(e){
				var ta = e.target;
				//console.log("scrollHeight="+ta.scrollHeight+" scrollTop="+ta.scrollTop);
			
				var miror = $(".miror");
				miror.get(0).scrollTop = ta.scrollTop;
				
				
				
				var span = miror.children("span");
				var offset = span.offset();
				//console.log("offset=",offset);
				//var img = $("img");
				//img.css( "left", 560 + span.width() );
				//img.css("top", 30 + (lines.length-1) * 16);
				
				
			});
		});
	</script>
	<style type="text/css">
		body{
			margin:0;
			padding:0;
		}
		.r-col{
			position:absolute;
			top: 0;
			left: 220px;
			width: 220px;
			height: 250px;
			
			
		}
		
		
		
		.r-col textarea{
		    left: 10px;
		    padding: 0;
		    margin :0;
		    border: 1px solid black;	    		    
			top: 30px;
			width: 200px;
		}
		
		
		.l-col{
			float:left;
			width:220px;
			height: 250px;
			background-color:#af2f2f;
		}
		
		.l-col textarea{
			left: 100px;			
		}
		
		.bottom{
			clear:both;
			background-color:gray;
			height:100%;
		}
		
		textarea{
			height: 200px;
		    position: absolute;
		    
		    
		    font-family: arial, Helvetica, sans-serif;
		    font-size: 14px;
		}
		
		.miror{
			height: 200px;
		    position: absolute;
		    width: 200px;
		    top: 30px;
		    left: 10px;
		    border: 1px solid gray;
		    font-family: arial, Helvetica, sans-serif;
		    font-size: 14px;
		    overflow: hidden;
		    padding: 0px;
		    margin: 0px;
		}
	</style>
</head>
<body>
	<div class="r-col">
		Type text here:
		<textarea></textarea>		
	</div>
	<div class="l-col">
		clone for calculations of cursor:
		<div class="miror"></div>			
		
	</div>
	<div class="bottom">
		
	</div>
	<img style='position:absolute; top:-24px; left:240px;' src='arrow.png' />
</body>
</html>